<div class="layui-card-header layui-card">
<span class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">首页</a>
<a><cite>支付配置</cite></a>
</span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付接口</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                        <a lay-href="config/pay_interface/create" class="layui-btn" data-type="all" data-events="create">新增支付接口</a>
                        <button class="layui-btn layui-btn-danger" id="btnDelete">删除</button>
                    </div>
                </div>
                <table class="layui-hide center" id="cList"></table>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'util', 'form', 'element', 'layer'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;

        element.render('breadcrumb', 'breadcrumb'); // 渲染导航信息

        // 监听删除按钮点击事件
        $('#btnDelete').click(function () {
            var checkStatus = table.checkStatus('tableReload');
            var data = checkStatus.data;
            var payInterfaceList = [];
            for (var i = 0; i < data.length; i++) {
                payInterfaceList.push(data[i].ifCode);
            }
            if (payInterfaceList.length > 0) {
                // 调用删除接口，payInterfaceList为要删除的接口代码数组
                $.ajax({
                    url: layui.setter.baseUrl + '/config/pay_interface/deleteList',
                    type: 'POST',
                    data: {payInterfaceList: payInterfaceList.join(',')},
                    success: function () {
                        layer.msg('删除成功');
                        // 删除成功后重新加载表格数据
                        table.reload('tableReload');
                    },
                    error: function (xhr, status, error) {
                        layer.msg('删除失败：' + error); // 显示错误信息
                    }
                });
            } else {
                layer.msg('请选择要删除的支付接口');
            }
        });

        // 标题内容模板
        var tplTitle = function(d){
            return "<a class='layui-btn layui-btn-sm' lay-href='config/pay_interface/update/ifCode=" + d.ifCode + "'>编辑</a>";
        };

        var tplStatus = function(d){
            if(d.status == 0) {
                return "关闭";
            } else if(d.status == 1) {
                return "<span style='color: red'>开启</span>";
            }
        };

        table.render({
            elem: '#cList',
            url: layui.setter.baseUrl + '/config/pay_interface/list',
            where: { access_token: layui.data(layui.setter.tableName).access_token },
            id: 'tableReload',
            cols: [[
                {type: 'checkbox'} // 添加复选框列
                ,{field:'ifCode', title: '接口代码'}
                ,{field:'ifName', title: '接口名称'}
                ,{field:'ifTypeCode', title: '通道标识代码'}
                ,{field:'ifTypeName', title: '通道标识名称'}
                //{field:'payTypeName',  title: '支付类型'}
                //{field:'scene', title: '应用场景',templet: '<div>{{d.scene == 1?"移动APP":(d.scene == 2)?"移动网页":(d.scene == 3)?"PC网页":(d.scene == 4)?"微信公众平台":(d.scene == 5)?"手机扫码":""}}</div>'}
                ,{field:'status', title: '状态',templet: tplStatus }
                ,{field:'edite', width: 200, title: '操作', templet: tplTitle }
            ]],
            page: true,
            skin: 'line',
            done: function(res, curr, count) {
                // 渲染表格完成后重新渲染复选框
                $('table.layui-table tbody td').find('div.laytable-cell-checkbox div.layui-form-checkbox').each(function(){
                    $(this).css({
                        'height': 'auto',
                        'min-height': '0px'
                    });
                });
                form.render();
            }
        });

        form.render();
    });
</script>